<template>
    <div>
        <el-button-group class="d-option">
            <el-button size="mini" @click="openDialog('add', {})">新增</el-button>
            <el-button size="mini">筛选</el-button>
        </el-button-group>

        <!--代办列表-->
        <el-table :data="tableData" ref="data" :row-class-name="tableRowClassName"style="width: 100%" class="d-table-btn" size="small">
            <el-table-column fixed type="index" label="序号" width="50" show-overflow-tooltip></el-table-column>
            <el-table-column fixed prop="project" label="事件" min-width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="姓名" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="startTime" label="开始时间" width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{ scope.row.startTime | formatTime }}
                </template>
            </el-table-column>
            <el-table-column prop="endTime" label="截止时间" width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{ scope.row.endTime | formatTime }}
                </template>
            </el-table-column>
            <el-table-column prop="warning" label="状态" width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{ scope.row.warning | formatWarning }}
                </template>
            </el-table-column>
            <el-table-column prop="useTime" label="用时" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="openDialog('add', {})">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
                @size-change="pageSizeChange"
                @current-change="pageCurrentChange"
                :current-page="params.pageCurrent"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageTotal">
        </el-pagination>

        <!--弹窗-->
        <component v-model="comVisible" :is="comCurrent" :option="comOPtion" @callback="getTableData"></component>
    </div>
</template>

<script>
    export default {
        name: 'home',
        mixins: [pageMixin],
        components: {
            homeDialog: res => require(['./homeDialog.vue'], res),
        },
        data() {
            return {
                comVisible: false,
                comCurrent: '',
                comOPtion: {},
                tableData: [],
            }
        },
        methods: {
            getTableData () {
                this.$ajax.getIndexs(this.params).then(res => {
                    this.tableData = res.data
                    this.pageTotal = res.count || 0
                })
            },
            openDialog (type, data) {
                this.comCurrent = 'homeDialog'
                this.comVisible = true
                this.comOPtion = {
                    type,
                    data
                }
            },
            tableRowClassName ({ row }) {
                switch (row.warning) {
                    // 过期/已完成/警告/危险
                    case 0:
                        return 'overdue'
                        break
                    case 1:
                        return 'success'
                        break
                    case 3:
                        return 'warning'
                        break
                    case 4:
                        return 'danger'
                        break
                    default:
                        return ''
                }
            },
        },
        created: function () {
            this.getTableData()
            this.pageFunc = this.getTableData
        },
        mounted: function () {

        }
    }
</script>


